<template>
	<view class="page">
		<view class="title">
			为了更好的为您服务，请您务必填写真实信息
		</view>
		<u-form-item borderBottom v-if="reject_msg">
			<template #label class="title">
				<span style="color: red;">*</span>
				<span style="margin-right: 20rpx;font-weight: bold;" @click="getAddress">驳回原因:</span>
			</template>
			<u--input v-model="reject_msg" readOnly="readOnly" border="none" placeholder="请输入详细地址"></u--input>
		</u-form-item>
		<view class="form">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">

				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-bottom: 120rpx;font-weight: bold;">商户门头/logo:</span>
					</template>

				</u-form-item>
				<u-form-item borderBottom>
					<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:maxCount="1" :previewFullImage="true"></u-upload>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">联系电话:</span>
					</template>
					<u-input v-model="model1.userInfo.phone" border="none" placeholder="请输入电话"></u-input>
				</u-form-item>

				<!-- <u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">验证码:</span>
					</template>
					<u-input v-model="leasingManager.code" border="none" placeholder="请输入验证码"></u-input>
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<u-button @tap="getCode" size="mine">{{tips}}</u-button>
				</u-form-item> -->
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">上传营业执照（只能上传jpg/png）:</span>
					</template>
				</u-form-item>
				<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
					:maxCount="1" width="250" height="150">
					<image
						src="https://ts3.cn.mm.bing.net/th?id=OIP-C.cvnF4SLcwVuUXP6t32U_9gHaFJ&w=299&h=208&c=8&rs=1&qlt=90&o=6&cb=13&pid=3.1&rm=2"
						mode="widthFix" style="width: 250px;height: 150px;"></image>
				</u-upload>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">社会统一信用代码:</span>
					</template>

					<u--input v-model="model1.userInfo.socialCode" border="none" placeholder="请输入社会统一信用代码"></u--input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">商户名称:</span>
					</template>

					<u--input v-model="model1.userInfo.name" border="none" placeholder="请输入商户名称"></u--input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">商户简称:</span>
					</template>

					<u--input v-model="model1.userInfo.abbreviation" border="none" placeholder="请输入商户简称"></u--input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;" @click="getAddress">详细地址:</span>
					</template>

					<u--input v-model="model1.userInfo.address" readOnly="readOnly" border="none" placeholder="请输入详细地址"></u--input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">营业时间:</span>
					</template>

					<u--input v-model="model1.userInfo.time" border="none" placeholder="请输入营业时间"></u--input>
				</u-form-item>

				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="font-weight: bold;">商户介绍:</span>
					</template>
				</u-form-item>
				<uni-forms-item borderBottom>
					<u--textarea v-model="value1" placeholder="请输入商户简介内容" height="80" maxlength="150" count="true"
						border="bottom"></u--textarea>
				</uni-forms-item>
				<!-- 
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">上传身份证:</span>
					</template>

				</u-form-item>
				<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
					:maxCount="1" width="250" height="150">

					<div class="identityCard" style="">
						<view class="image1" style="margin:0  20rpx ;">
							<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
								style="width: 150px; height: 200px; border-radius: 10px;" />
							<view class="" style="text-align: center;">
								身份证正面
							</view>
						</view> 
						<view class="image1" style="margin:0  20rpx ;">
							<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
								style="width: 150px; height: 200px; border-radius: 10px;" />
							<view class="" style="text-align: center;">
								身份证反面
							</view>
						</view>

					</div>

				</u-upload> -->
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">法人姓名:</span>
					</template>
					<u-input v-model="model1.userInfo.legalEntityName" border="none" placeholder="请输入法人姓名"></u-input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">法人身份证号码:</span>
					</template>
					<u-input v-model="model1.userInfo.identityCardNumber" border="none"
						placeholder="请输入身份证号码"></u-input>
				</u-form-item>

				<!-- <u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">收款人:</span>
					</template>
					<u-input v-model="model1.userInfo.collection" border="none" placeholder="请输入收款人"></u-input>

				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">开户银行:</span>
					</template>
					<u-input v-model="model1.userInfo.bank" border="none" placeholder="请输入开户银行"></u-input>

				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">银行卡号:</span>
					</template>
					<u-input v-model="model1.userInfo.bankNumber" border="none" placeholder="请输入银行卡号"></u-input>

				</u-form-item> -->
				<u-form-item borderBottom @click="show=true">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">招商经理:</span>
					</template>
					<u-input v-model="model1.userInfo.investmentManager.attract_name" disabled placeholder="请选择代理类型"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">入驻费:</span>
					</template>
					<u-input v-model="entry_fee" border="none" placeholder="">元</u-input>
				</u-form-item>
				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">签名:</span>
					</template>
				</u-form-item>
				<u-form-item borderBottom>
					<image
						:src="isSelfImg"
						@click="showSelf=true"
						mode="widthFix" style="width: 250px;height: 150px;"></image>
				</u-form-item>
				
				
				

			</u--form>

		</view>
		<u-picker :keyName="'attract_name'" :show="show" :columns="collectionLists" @close="close" @confirm="confirm"></u-picker>

		<u-popup :show="show2" round="10" mode="center" @close="close2" @open="open">
			<view style="margin: 20rpx;">
				<view class="title1" style="text-align: center;">
					区域经理入驻合同
				</view>
				<scroll-view style="height: 300px;" scroll-y="true" class="scroll-Y" >
					<view v-html="textConten"> </view>
				</scroll-view>
			</view>
		</u-popup>
		<view class="container">
			
			<view class="item">
				<u-checkbox-group @change="changeFn">
					<u-checkbox ></u-checkbox>
				</u-checkbox-group>
				<view>
					我已阅读
					<text class="text1" @click="show2=true">《区域经理入驻协议》</text>，
					并已签署
					<text class="text1" @click="hetong">《区域经理入驻合同》</text>
				</view>
			</view>
			<view class="custom-button" @tap="submit">提交</view>


		</view>


		<u-popup :show="showSelf" round="10" mode="center" @close="showSelf=false">
			<view style="margin: 20rpx;" >
				<SignaturePad @getImg="getImgFn" />
			</view>
		</u-popup>

	</view>






</template>

<script>
	import SignaturePad from './../../canvas.vue';
	import {
		getAgreementData,
		uploadImg,
		getEntryFee,
		addStore,
		getAddStoreInfo,
		getAttractList
	} from '@/config/api.js';
	export default {
		components:{
			SignaturePad,
		},
		data() {
			return {
				showSelf: false,
				show2:false,
				textConten: '',
				show: false,
				value1: '',
				value2: '',
				tips: '获取验证码',
				show: false,
				paramName: '',
				paramContent: '', // 用于存储输入的参数名

				selectedLabel: '',
				//规格属性
				count: '',
				price: '',
				color: '',
				fileList6: [],
				checkboxValue1: [],

				
				fileList3: [],
				showFree: false,
				fileList1: [],
				collectionLists: [
					['无', '周海军', '网民']
				],
				model1: {
					userInfo: {
						name: '',
						phone: '',
						time: '',
						free: '',

						code: '',
						socialCode: '',
						abbreviation: '', //简称
						address: '内蒙古自治区赤峰市松山区契丹古玩城',
						legalEntityName: '', //法人姓名
						identityCardNumber: '',
						collection: '',
						bank: '',
						bankNumber: '',
						price: '5000元',
						investmentManager: {attract_name:''} //招商经理,
					},
				},

				rules: {
					'userInfo.socialCode': {
						type: 'string',
						required: true,
						message: '社会统一信用代码',
						trigger: ['blur', 'change']
					},
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写商户名称',
						trigger: ['blur', 'change']
					},
					'userInfo.legalEntityName': {
						type: 'string',
						required: true,
						message: '请填写法人姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.identityCardNumber': {
						type: 'string',
						required: true,
						message: '请填写法人身份证',
						trigger: ['blur', 'change']
					},
					bank: {
						type: 'string',
						trigger: ['blur', 'change'],
						required: true,
						message: '开户银行是必填项'
					},
					bankNumber: {
						type: 'string',
						trigger: ['blur', 'change'],
						required: true,
						message: '银行卡号是必填项'
					},
					collection: {
						type: 'string',
						trigger: ['blur', 'change'],
						required: true,
						message: '收款人是必填项'
					},

					'userInfo.abbreviation': {
						type: 'string',
						required: true,
						message: '请填写商户简称',
						trigger: ['blur', 'change']
					},
					'userInfo.address': {
						type: 'string',
						required: true,
						message: '请填写详细地址',
						trigger: ['blur', 'change']
					},
					'userInfo.time': {
						type: 'string',
						required: true,
						message: '请填写营业时间',
						trigger: ['blur', 'change']
					},
					'userInfo.phone': {
						type: 'string',
						required: true,
						message: '请填写联系电话',
						trigger: ['blur', 'change']
					},
					'userInfo.firm': {
						type: 'string',
						required: true,
						message: '请填写公司名称',
						trigger: ['blur', 'change']
					},
					'userInfo.free': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择是否包邮',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false,
				nav_id: null,
				store_id: null,
				latitude_wx: 42.265807,
				longitude_wx: 118.959592,
				isSelfImg: null,
				id: null,
				entry_fee: 0,
				bank_id: null,
				reject_msg:'',
			};
		},
		onLoad(options) {
			// 获取传递过来的标题
			const title = decodeURIComponent(options.title);
			console.log('jsjsj', options)
			this.nav_id = options.nav_id;
			this.store_id = options.store_id;
			// 设置 B 页面的标题
			wx.setNavigationBarTitle({
				title: title + ' 入驻'
			});
			getAttractList().then(res => {
				this.collectionLists = [res];
			})
			getAgreementData({id: 13}).then(res => {
				this.textConten = res;
			})
			getEntryFee({id: this.nav_id}).then(res => {
				this.entry_fee = res.entry_fee;
			})
			getAddStoreInfo({nav_id: this.nav_id,store_id:this.store_id}).then(res => {
				if(!res.cardId) uni.$u.toast('请先绑定银行卡');
				this.bank_id = res.cardId;
				if(!res.storeInfo.id)return;
				const data = res.storeInfo;
				this.id = data.id;
				 this.fileList6 = [{url:  data.Business_license}];
				 this.fileList3 = [{url:  data.logo_img}];
				this.model1.userInfo.phone = data.phone;
				this.model1.userInfo.name = data.store_name;
				this.model1.userInfo.abbreviation = data.store_shot_name;
				this.model1.userInfo.address = data.address;
				this.model1.userInfo.time = data.online_time;
				this.value1 = data.introduce;
				this.model1.userInfo.legalEntityName = data.faren_name;
				this.model1.userInfo.identityCardNumber = data.faren_cardNum;
				this.model1.userInfo.socialCode = data.social_unified_credit_code;
				this.latitude_wx = data.latitude_wx;
				this.longitude_wx = data.longitude_wx;
				this.isSelfImg = data.card_top;
				this.reject_msg = data.reject_msg;
				this.collectionLists[0].forEach(el => {
					if (el.user_id == data.zhaoshang_id) this.model1.userInfo.investmentManager = el;
				});
				
			})
		},
		methods: {
			async getImgFn(url){
				this.showSelf = false;
				const result = await this.uploadFilePromise(url)
				this.isSelfImg = result;
			},
			hetong() {
				uni.navigateTo({
					url: '/moduleA/MerchantIn/contract?id=2',
				});
			},
			submit(){
				if(!this.bank_id)return uni.$u.toast('请先绑定银行卡');
				if (this.isAgreed) {
					// 提交逻辑
					// console.log('协议已阅读，提交成功');
					if(!this.isSelfImg){
						this.showSelf = true;
						return ;
					}
					const sendata = {
						Business_license: this.fileList6[0].url,
						logo_img: this.fileList3[0].url,
						phone: this.model1.userInfo.phone,
						store_name: this.model1.userInfo.name,
						store_shot_name: this.model1.userInfo.abbreviation,
						address: this.model1.userInfo.address,
						online_time: this.model1.userInfo.time,
						introduce: this.value1,
						faren_name: this.model1.userInfo.legalEntityName,
						faren_cardNum: this.model1.userInfo.identityCardNumber,
						social_unified_credit_code: this.model1.userInfo.socialCode,
						latitude_wx: this.latitude_wx,
						longitude_wx: this.longitude_wx,
						store_id:  this.store_id,
						bank_id: this.bank_id,
						category_id: this.nav_id,
						zhaoshang_id: this.model1.userInfo.investmentManager.user_id, 
						card_top: this.isSelfImg
					}
					if(this.id){
						sendata['status'] = 2;
						sendata['id'] = this.id;
					}
					
					console.log(sendata,'--------')
					addStore(sendata).then(res=>{
						uni.$u.toast('审核中...')
					})
					// this.$refs.uToast.show('提交成功');
				} else {
					// 提示用户需阅读协议
					// this.$refs.uToast.show();
					uni.$u.toast('请先阅读协议')
				}
			},
			changeFn(e){
				this.isAgreed = !!e.length;
				
			},
			
			deletePic(index) {
				this.fileList6.splice(index, 1);
			},

			onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
				this.$refs.uForm.setRules(this.rules)
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uploadImg({
						url: url,
						fileName: 'marketStore'
					}).then(res => {
						resolve(res)
					})
				})
			},
			//获取验证码
			getCode() {
				// 获取验证码的逻辑
				console.log('获取验证码');
			},
			end() {
				// 结束倒计时的逻辑
				console.log('倒计时结束');
			},
			start() {
				// 开始倒计时的逻辑
				console.log('倒计时开始');
			},
			codeChange() {
				// 处理验证码变化的逻辑
				console.log('验证码变化');
			},
			//选择招商经理
			close2() {
				this.show2 = false; // 关闭选择器
			},
			//选择招商经理
			close() {
				this.show = false; // 关闭选择器
			},
			getAddress(){
				const _this = this;
				uni.getLocation({
				      type: 'wgs84',
				      // 返回可以用于uni.openLocation的经纬度
				  success: function success(res) {
					uni.chooseLocation({
						latitude:res.latitude,
						longitude:res.longitude,
						success: function(res){
							_this.model1.userInfo.address = res.address
							_this.latitude_wx = res.latitude
							_this.longitude_wx = res.longitude
						},
					  fail: function (err) {
						  console.error('选择地点失败:', err);
					  }
					})
				  },
			
				  fail: function fail(err) {
					console.error('获取位置失败:', err);
				  }
				});
			},
			confirm(selectedItems) {
				// const sendata = {
				// 	Business_license: this.fileList6[0].url,
				// 	logo_img: this.fileList3[0].url,
				// 	phone: this.model1.userInfo.phone,
				// 	store_name: this.model1.userInfo.name,
				// 	store_shot_name: this.model1.userInfo.abbreviation,
				// 	address: this.model1.userInfo.address,
				// 	online_time: this.model1.userInfo.time,
				// 	introduce: this.value1,
				// 	faren_name: this.model1.userInfo.legalEntityName,
				// 	faren_cardNum: this.model1.userInfo.identityCardNumber,
				// 	social_unified_credit_code: this.model1.userInfo.socialCode,
				// 	latitude_wx: this.latitude_wx,
				// 	longitude_wx: this.longitude_wx,
				// 	// bank_id: 1,
				// 	// user_id: 3,
				// 	store_id:  this.store_id,
				// 	category_id: this.nav_id,
				// 	// zhaoshang_id: 1, 
				// }
	
				this.model1.userInfo.investmentManager = selectedItems.value[0]; // 更新输入框的值为选中的商品类目
				console.log(this.model1.userInfo.investmentManager)
				this.show = false; // 关闭选择器
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'settledTable.scss';

	.form {

		padding: 0 20rpx;

	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
		background-color: #ffebeb;
		color: red;
		padding: 0 20rpx;
	}

	.custom-button {
		background-color: #d1a969;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;

		border-radius: 40rpx;
		margin: 20rpx;
	}

	.popup-content .item1 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0;
	}

	.popup-content .title {
		margin-top: 20rpx;
		text-align: center;
	}

	.popup-content .button-group {
		display: flex;
		margin-top: 30rpx;
	}

	.popup-content .button-group .item {
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		border-radius: 40rpx;
		background-color: $base;
		margin: 0 40rpx;
	}

	.identityCard {
		display: flex;
		justify-content: space-between;
		width: 100%;

	}

	.container {
		margin-top: auto;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.text1 {
		color: #d1a969;
	}

	.identityCard {
		display: flex;
		justify-content: space-between;
		width: 100%;

	}

	.image1 {}

	.container .custom-button {
		width: 96%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #d1a969;
		/* 设置按钮的背景颜色 */
		color: #fff;
		border-radius: 50rpx;
	}
</style>